<%--
  Created by IntelliJ IDEA.
  User: 林辰育
  Date: 2020/8/18
  Time: 10:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>搜索</title>
    <!-- 引入bootstrap样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入datetimepicker -->
    <link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
    <script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <!-- 引入JQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 引入fontawesome -->
    <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义css文件 -->
    <link href="static/css/main.css" rel="stylesheet" type="text/css">
    <!--引入jquery.validate-->
    <%--    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>--%>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    <style type="text/css">
        body{
            background-image: linear-gradient(to right,#f2dede,#a6e1ec);
        }
    </style>
</head>
<body>
<%-- 页面顶部留白 --%>
<div class="container">
    <div class="row" style="height: 5%"></div>
</div>
<nav class="navbar navbar-default" role="navigation" style="background:#bdbdbd">
    <div class="container">
        <!-- 导航条 -->
        <div class="row">
            <div class="col-md-11">
                <ul class="nav nav-pills">
                    <li role="presentation"><a href="donateGoods">捐赠物资</a></li>
                    <li role="presentation"><a href="recieveGoods" >接收物资</a></li>
                    <li role="presentation"><a href="donator">捐赠者</a></li>
                    <li role="presentation"><a href="reciever" >接收者</a></li>

                    <ul class="nav  navbar-nav navbar-right">
                        <li class="active"><a href="turnToSearch"><span class="glyphicon glyphicon-search"></span>搜索</a></li>
                        <li><a href="mine"><span class="glyphicon glyphicon-user"></span><span id="username"></span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 注销</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <form class="form-horizontal" id="search_form" action="search">
                <span class="heading">搜索</span>
<%--                <div id="search-form">--%>
<%--                    <div class="col-md-8 col-xs-12 col-sm-12 push-down-0">--%>
<%--                        <input type="text" class="search-input-text" id="search-input" name="q" />--%>
<%--                    </div>--%>
<%--                    <div class="col-md-4 col-xs-12 col-sm-12 push-down-0">--%>
<%--                        <span class="glyphicon glyphicon-search"></span>--%>
<%--                    </div>--%>
<%--                </div>--%>
                <div class="form-group">
                    <div class="form-horizontal">
                        <label class="col-md-3 col-xs-12 col-sm-12 control-label text-align">查询类型</label>
                        <div class="col-md-8 col-xs-12 col-sm-12 push-down-0">
                            <select class="form-control" id="type" name="type">
                                <option>捐赠物资</option>
                                <option>接收物资</option>
                                <option>捐赠者</option>
                                <option>接收者</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-horizontal">
                        <div class="col-md-8 col-xs-12 col-sm-12 push-down-0">
                            <input type="text" class="form-control" id="key" name="key" placeholder="请输入关键词" autocomplete="off">
                        </div>

                        <div class="col-md-4 col-xs-12 col-sm-12 push-down-0">
                            <div class="left code-btn"><input type="submit" class="btn btn-default" value="搜索"></div>
                        </div>
                    </div>

                    <div class="col-md-8 col-xs-12 col-sm-12 suggest" id="search-suggest" style="display: none">
                        <ul id="search-result">
                            <li>搜索结果1</li>
                            <li>搜索结果2</li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $().ready(function(){
        //进入页面后，首先获取token信息
        get_token();

        $('#key').bind('keyup',function(){
            if($(this).val()!==''){
                $.get('searchKeys',
                    {
                        key:$(this).val(),
                        type:$('#type').val()
                    },function (data) {
                        console.log(data);
                        //var html="<li>搜索结果3</li><li>搜索结果4</li>";
                        var html="";
                        for(var i = 0; i < data.length; i++){
                            html+= '<li>' + data[i] + '</li>';
                        }
                        //alert("success");
                        $('#search-result').html(html);
                        if(html!==""){
                            console.log(html+"0");
                            $('#search-suggest').show();
                        }

                    });
            } else {
                $('#search-suggest').hide();
            }
        });
    })

    $(document).bind('click',function (event){
       $('#search-suggest').hide();
    });
    $(document).delegate('li','click',function(event){
        var li_text = $(this).text();
        location.href = "search?key=" + li_text + "&type=" + $('#type').val();
    });
    //发送ajax请求，获取token
    function get_token(){
        $.ajax({
            url:"getToken",
            type:"GET",
            dataType:"JSON",
            success:function(result){
                //将返回的用户信息保存在token中
                var token = result;
                //打印登录用户
                //console.log(token);
                //打印登录用户的id
                //console.log(token.id);
                document.getElementById('username').innerText = "用户名:"+token.username;
            }
        });
    }
</script>
</body>
</html>